<!-- 找资源 -->
<template>
  <div class="fullW">
    <breadcrumb />
    <div class="queryData brw">
      <div>
        <el-input
          v-model="queryTitle"
          placeholder="找资源，可输入关键词搜索"
          size="large"
          class="search"
        >
          <template #append>
            <el-button class="btn" @click="queryFn">搜索</el-button>
          </template>
        </el-input>
        <el-button
          type="primary"
          class="btn"
          size="large"
          @click="openPublishOrder"
          >发布需求</el-button
        >
      </div>
      <div class="list">
        <ul>
          <li v-for="(item, index) in queryOption" :key="index">
            <div class="title">{{ item.title }}</div>
            <div class="items">
              <el-checkbox-group
                v-if="item.multiple"
                @change="(e) => checkboxChange(e, item)"
                v-model="queryFrom[item.key]"
                size="default"
                class="group"
              >
                <el-checkbox-button
                  v-for="(cell, i) in item.items"
                  :key="i"
                  :value="cell.value"
                >
                  {{ cell.name }}
                </el-checkbox-button>
              </el-checkbox-group>
              <el-radio-group
                v-else
                v-model="queryFrom[item.key]"
                size="default"
                class="group"
              >
                <el-radio-button
                  v-for="(cell, i) in item.items"
                  :key="i"
                  :value="cell.value"
                  >{{ cell.name }}</el-radio-button
                >
              </el-radio-group>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <needList class="mt-16px" :queryFrom="queryFrom" :queryTitle="queryTitle" ref="needListRef"></needList>
  </div>
  <!-- 发布需求 -->
  <PublishOrder ref="publishOrderRef" @updata="updata" />
</template>
<script setup>
import { storeToRefs } from "pinia";

useHead({
  title: `需求列表-${appTitle}`,
});

definePageMeta({ title: "需求列表" });
// 获取用户信息

const global = useStore.global()
const user = useStore.user()
const { categoryList,cityList } = storeToRefs(global);
const queryOption = [
  {
    title: "类型选择",
    key: "categoryCodes",
    multiple: true,
    items: [
      {
        name: "全部",
        value: "all",
      },
      ...categoryList.value.map(it=>{
        return {
          name:it.categoryName,
          value:it.categoryCode
        }
      })
    ],
  },
  {
    title: "发布时间",
    key: "releaseDateScope",
    items: [
    {
        name: "全部",
        value: "",
      },
      {
        name: "今天发布",
        value: "DAY",
      },
      {
        name: "一周内发布",
        value: "WEEK",
      },
      {
        name: "一个月内发布",
        value: "MONTH",
      },
    ],
  },
  {
    title: "目的城市",
    key: "cityCodes",
    multiple: true,
    items: [
      {
        name: "全部",
        value: "all",
      },
      ...cityList.value.map(it=>{
        return {
          name:it.nameCn,
          value:it.code
        }
      })
    ],
  },
  {
    title: "状态",
    key: "status",
    items: [
      {
        name: "全部",
        value: "",
      },
      {
        name: "进行中",
        value: "UNDERWAY",
      },
      {
        name: "已结束",
        value: "FINISHED",
      },
    ],
  },
];

const queryTitle = ref()
const queryFrom = reactive({
  categoryCodes:['all'],
  cityCodes:['all'],
  releaseDateScope:'',
  status:''
});

const checkboxChange = (e, data) => {
  const values = data.items.map((it) => it.value);
  if (e[e.length - 1] === "all") {
    queryFrom[data.key] = values;
    return;
  }
  if (e.length !== values.length && e.includes("all")) {
    queryFrom[data.key] = e.filter((it) => it !== "all");
  }

  if (e.length === values.length - 1 && !e.includes("all")) {
    queryFrom[data.key].unshift("all");
  }

  if(e.length===0){
    queryFrom[data.key]=['all']
  }
};

// 发布需求
const publishOrderRef = ref();
const openPublishOrder = () => {
  if (!user.token) {
    ElMessageBox.confirm(`发布需求前请先登录，是否登录?`, "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true,
      buttonSize: "default",
    }).then(async () => {
      user.login();
    });
  } else {
    publishOrderRef.value.show();
  }
};

const needListRef = ref()
const queryFn = ()=>{
  needListRef.value.getList()
}
</script>
<style scoped lang="scss">
.queryData {
  padding: 24px;

  .list {
    margin-top: 16px;
    li {
      border-bottom: 1px solid var(--use-color-line);
      padding: 15px 0;
      display: flex;
      .title {
        line-height: 26px;
        width: 128px;
      }
      .items {
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        ::v-deep(.group) {
          display: flex;
          gap: 40px;

          .el-radio-button__original-radio:checked + .el-radio-button__inner {
            color: var(--use-color-info);
            border-radius: 4px;
          }
          .el-radio-button .el-radio-button__inner,
          .el-checkbox-button__inner {
            border: none;
          }
          .el-checkbox-button:last-child .el-checkbox-button__inner,
          .el-checkbox-button.is-checked .el-checkbox-button__inner {
            border-radius: 4px;
            box-shadow: none;
            color: var(--use-color-info);
          }
        }
      }
    }
  }
}
.w-list {
  padding-bottom: 24px;

  li + li {
    margin-top: 16px;
  }

  li {
    padding: 12px 16px;
    border-radius: 4px;
    border: 1px solid var(--use-color-line);
    cursor: pointer;
    display: flex;

    &:hover {
      border-color: var(--use-color-info);
    }

    .photo {
      width: 236px;
      height: 160px;
      border-radius: 4px;
      overflow: hidden;
      margin-right: 24px;

      .img {
        width: 100%;
        height: 100%;
      }
    }

    .info {
      .title {
        line-height: 26px;
        font-size: 18px;
        font-weight: bold;
      }

      .tags {
        padding-top: 4px;
        color: var(--use-color-info-light-2);
        line-height: 22px;

        > div {
          margin-top: 8px;
        }
      }

      .contact {
        padding-top: 20px;
        display: flex;
        color: var(--use-color-info-light-3);
        gap: 0 32px;

        .iconfont {
          margin-right: 8px;
        }
      }
    }
  }
}

::v-deep(.search) {
  width: 800px;
  height: 44px;
  line-height: 44px;
  border: 2px solid var(--use-color-primary);
  overflow: hidden;
  border-radius: 8px;
  margin-right: 16px;

  .el-input__inner {
    font-size: 16px;
  }
  .el-input-group__append {
    background-color: var(--use-color-primary) !important;
  }
  .el-input-group__prepend {
    background-color: #fff;
    box-shadow: none;
    border-right: 2px solid #f0f2f9;

    .el-select__wrapper {
      height: 44px;
      line-height: 44px;
      font-size: 16px;
    }
  }

  .el-input__wrapper {
    box-shadow: none;
  }
}
.btn {
  font-size: 16px;
  width: 96px;
  background-color: var(--use-color-primary) !important;
  color: var(--use-color-info) !important;
  font-weight: 500;
  border-radius: 8px !important;
  height: 44px !important;
  padding: 0 24px !important;
}
</style>
